<template>
  <div class="fillcontain">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>作业详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="toReturn">返回</el-button>
      </div>
      <el-form :inline="true" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业名称：">{{ musicDetail.name }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学科：">{{ musicDetail.subjectName }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业日期：">{{ musicDetail.workDate }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布时间：">{{ musicDetail.issueTime }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间：">{{ musicDetail.startTime }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="截止时间：">{{ musicDetail.finalTime }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>完成情况</span>
      </div>
    <el-table
      :data="tableData"
      border
      highlight-current-row
      header-cell-class-name="table-header-class"
      style="width:100%"
      v-loading="loading"
    >
      <el-table-column prop="studentName" label="学生姓名" align="center"></el-table-column>
      <el-table-column prop="exerciseAnswer" label="答案" align="center"></el-table-column>
      <el-table-column prop="score" label="分数" align="center"></el-table-column>
      <el-table-column prop="completeTime" label="完成时间" align="center"></el-table-column>
      <el-table-column prop="timeStamp" label="提交时间" align="center"></el-table-column>
      <el-table-column prop="correctTime" label="批改时间" align="center"></el-table-column>
    </el-table>
    <el-row class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper, sizes"
        :page-size="page.pageSize"
        :page-sizes="[2,5,10,20,50,100]"
        :total="page.total"
        @current-change="pageChange"
        @size-change="sizeChange"
      ></el-pagination>
    </el-row>
    </el-card>
  </div>
</template>

<script>
import * as musicApi from "@/api/musicApi";
import * as reportApi from "@/api/reportApi";
export default {
  data() {
    return {
      musicDetail: {},
      page: {
        page: 1,
        pageSize: 10,
        total: 1
      },
      loading: false,
      addExerciseFlag: false,
      tableData: [],
      searchForm: {}
    };
  },
  async mounted() {
    musicApi.getMusicInfo({ id: this.$route.query.id }).then(res => {
      if (res.errorCode == 0) {
        this.musicDetail = res.data;
      }
    });
    await this.getExerciseList();
  },
  methods: {
    getExerciseList() {
      return new Promise((resolve, reject) => {
        let requestData = Object.assign(
          { id: this.$route.query.id },
          this.page,
          this.searchForm
        );
        this.loading = true;
        reportApi
          .getReportList(requestData)
          .then(res => {
            if (res.errorCode == 0) {
              console.log("---------------------");
              console.log(res);
              this.page.total = res.totalCount;
              this.tableData = res.data;
            }
            resolve();
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    pageChange(page) {
      this.page.page = page;
      this.getExerciseList();
    },
    sizeChange(size) {
      this.page.pageSize = size;
      this.getExerciseList();
    },
    toReturn() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scope>
.fillcontain {
  height: calc(100vh - 180px);
  padding: 30px;
  overflow: auto;
  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
.card-item {
  line-height: 40px;
}
</style>
